﻿<html>
	<head>
		<title>ComboBox - jQuery LigerUI API</title>     
 
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
		<link href="../common.css" rel="stylesheet" type="text/css" />
		<script src="../core.js" type="text/javascript"></script> 
	</head>
	<body>
		<h2>事件列表</h2> 

		<table class="apitable" cellpadding="0" cellspacing="0">
			 <thead>
            <tr> 
				<td>事件名</td>
				<td>参数</td> 
				<td>描述</td> 
			</tr>
            </thead>
            <tbody>
					<tr> 
                <td> 
                    <a name="event_onBeforeSelect" key="onBeforeSelect" class="linkname"></a>
                                                                     <a href="#link1" title="点击查看示例">onBeforeSelect</a>
                        
                    				</td>
                <td> 
                                        (value,text)
                    				</td>
				<td class="description"> 
                                        选择前事件
                    				</td> 
			</tr>
					<tr> 
                <td> 
                    <a name="event_onSelected" key="onSelected" class="linkname"></a>
                                                                     <a href="#link2" title="点击查看示例">onSelected</a>
                        
                    				</td>
                <td> 
                                        (value,text)
                    				</td>
				<td class="description"> 
                                        选择事件
                    				</td> 
			</tr>
					<tr> 
                <td> 
                    <a name="event_onStartResize" key="onStartResize" class="linkname"></a>
                                                                     onStartResize
                        
                    				</td>
                <td> 
                                        ()
                    				</td>
				<td class="description"> 
                                        下拉框编辑前事件
                    				</td> 
			</tr>
					<tr> 
                <td> 
                    <a name="event_onEndResize" key="onEndResize" class="linkname"></a>
                                                                     onEndResize
                        
                    				</td>
                <td> 
                                        ()
                    				</td>
				<td class="description"> 
                                        下拉框编辑后事件
                    				</td> 
			</tr>
					<tr> 
                <td> 
                    <a name="event_onSuccess" key="onSuccess" class="linkname"></a>
                                                                     onSuccess
                        
                    				</td>
                <td> 
                                        (data)
                    				</td>
				<td class="description"> 
                                        加载完事件
                    				</td> 
			</tr>
					<tr> 
                <td> 
                    <a name="event_onError" key="onError" class="linkname"></a>
                                                                     onError
                        
                    				</td>
                <td> 
                                        (XMLHttpRequest, textStatus)
                    				</td>
				<td class="description"> 
                                        错误事件
                    				</td> 
			</tr>
					<tr> 
                <td> 
                    <a name="event_onBeforeOpen" key="onBeforeOpen" class="linkname"></a>
                                                                     onBeforeOpen
                        
                    				</td>
                <td> 
                                        ()
                    				</td>
				<td class="description"> 
                                        打开前事件
                    				</td> 
			</tr>
					<tr> 
                <td> 
                    <a name="event_onButtonClick" key="onButtonClick" class="linkname"></a>
                                                                     <a href="#link170" title="点击查看示例">onButtonClick</a>
                        
                    				</td>
                <td> 
                                        ()
                    				</td>
				<td class="description"> 
                                        右侧图标按钮事件
                    				</td> 
			</tr>
					<tr> 
                <td> 
                    <a name="event_onAfterSetData" key="onAfterSetData" class="linkname"></a>
                                                                     onAfterSetData
                        
                    				</td>
                <td> 
                                        ()
                    				</td>
				<td class="description"> 
                                        设置完数据事件
                    				</td> 
			</tr>
					<tr> 
                <td> 
                    <a name="event_onBeforeSetData" key="onBeforeSetData" class="linkname"></a>
                                                                     onBeforeSetData
                        
                    				</td>
                <td> 
                                        ()
                    				</td>
				<td class="description"> 
                                        设置数据前事件
                    				</td> 
			</tr>
					<tr> 
                <td> 
                    <a name="event_onTextBoxKeyDown" key="onTextBoxKeyDown" class="linkname"></a>
                                                                     onTextBoxKeyDown
                        
                    				</td>
                <td> 
                                        ()
                    				</td>
				<td class="description"> 
                                        当焦点位于文本框时按键Down事件
                    				</td> 
			</tr>
					<tr> 
                <td> 
                    <a name="event_onTextBoxKeyEnter" key="onTextBoxKeyEnter" class="linkname"></a>
                                                                     onTextBoxKeyEnter
                        
                    				</td>
                <td> 
                                        ()
                    				</td>
				<td class="description"> 
                                        当焦点位于文本框时按键Enter事件
                    				</td> 
			</tr>
					<tr> 
                <td> 
                    <a name="event_onChangeValue" key="onChangeValue" class="linkname"></a>
                                                                     onChangeValue
                        
                    				</td>
                <td> 
                                        (value)
                    				</td>
				<td class="description"> 
                                        值改变事件
                    				</td> 
			</tr>
		
     
        </tbody>
		</table>


                                       <a name="link1"></a>
                <h3 class="event">onBeforeSelect事件 示例：</h3>

                <p>
                <pre><div><!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><span style="color: #008080;"> 1</span> <span style="color: #000000;"> </span><span style="color: #0000FF;">var</span><span style="color: #000000;"> proData </span><span style="color: #000000;">=</span><span style="color: #000000;">
</span><span style="color: #008080;"> 2</span> <span style="color: #000000;">            [{ id: </span><span style="color: #000000;">1</span><span style="color: #000000;">, text: </span><span style="color: #000000;">'</span><span style="color: #000000;">广东</span><span style="color: #000000;">'</span><span style="color: #000000;"> },
</span><span style="color: #008080;"> 3</span> <span style="color: #000000;">            { id: </span><span style="color: #000000;">2</span><span style="color: #000000;">, text: </span><span style="color: #000000;">'</span><span style="color: #000000;">福建</span><span style="color: #000000;">'</span><span style="color: #000000;">}];
</span><span style="color: #008080;"> 4</span> <span style="color: #000000;">            $(</span><span style="color: #000000;">&quot;</span><span style="color: #000000;">#txtPro</span><span style="color: #000000;">&quot;</span><span style="color: #000000;">).ligerComboBox({ data: proData, isMultiSelect: </span><span style="color: #0000FF;">false</span><span style="color: #000000;">,
</span><span style="color: #008080;"> 5</span> <span style="color: #000000;">                onBeforeSelect: </span><span style="color: #0000FF;">function</span><span style="color: #000000;"> (newvalue)
</span><span style="color: #008080;"> 6</span> <span style="color: #000000;">                {
</span><span style="color: #008080;"> 7</span> <span style="color: #000000;">                    alert(</span><span style="color: #000000;">'</span><span style="color: #000000;">要选择的是</span><span style="color: #000000;">'</span><span style="color: #000000;"> </span><span style="color: #000000;">+</span><span style="color: #000000;"> newvalue);
</span><span style="color: #008080;"> 8</span> <span style="color: #000000;">                    </span><span style="color: #0000FF;">return</span><span style="color: #000000;"> confirm(</span><span style="color: #000000;">'</span><span style="color: #000000;">onBeforeSelect事件可以阻止选择，是否继续</span><span style="color: #000000;">'</span><span style="color: #000000;">);
</span><span style="color: #008080;"> 9</span> <span style="color: #000000;">                },
</span><span style="color: #008080;">10</span> <span style="color: #000000;">                onSelected: </span><span style="color: #0000FF;">function</span><span style="color: #000000;"> (newvalue)
</span><span style="color: #008080;">11</span> <span style="color: #000000;">                {
</span><span style="color: #008080;">12</span> <span style="color: #000000;">                    alert(</span><span style="color: #000000;">'</span><span style="color: #000000;">选择的是</span><span style="color: #000000;">'</span><span style="color: #000000;"> </span><span style="color: #000000;">+</span><span style="color: #000000;"> newvalue);
</span><span style="color: #008080;">13</span> <span style="color: #000000;">                }
</span><span style="color: #008080;">14</span> <span style="color: #000000;">            });</span></div></pre>
                </p>
                                                <a name="link2"></a>
                <h3 class="event">onSelected事件 示例：</h3>

                <p>
                <pre><div><!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><span style="color: #008080;"> 1</span> <span style="color: #000000;"> </span><span style="color: #0000FF;">var</span><span style="color: #000000;"> proData </span><span style="color: #000000;">=</span><span style="color: #000000;"> 
</span><span style="color: #008080;"> 2</span> <span style="color: #000000;">            [{ id: </span><span style="color: #000000;">1</span><span style="color: #000000;">, text: </span><span style="color: #000000;">'</span><span style="color: #000000;">广东</span><span style="color: #000000;">'</span><span style="color: #000000;"> }, 
</span><span style="color: #008080;"> 3</span> <span style="color: #000000;">            { id: </span><span style="color: #000000;">2</span><span style="color: #000000;">, text: </span><span style="color: #000000;">'</span><span style="color: #000000;">福建</span><span style="color: #000000;">'</span><span style="color: #000000;">}];
</span><span style="color: #008080;"> 4</span> <span style="color: #000000;">            </span><span style="color: #0000FF;">var</span><span style="color: #000000;"> cityData </span><span style="color: #000000;">=</span><span style="color: #000000;">
</span><span style="color: #008080;"> 5</span> <span style="color: #000000;">            [{ id: </span><span style="color: #000000;">1</span><span style="color: #000000;">, text: </span><span style="color: #000000;">'</span><span style="color: #000000;">潮州</span><span style="color: #000000;">'</span><span style="color: #000000;">, pid: </span><span style="color: #000000;">1</span><span style="color: #000000;"> },
</span><span style="color: #008080;"> 6</span> <span style="color: #000000;">            { id: </span><span style="color: #000000;">2</span><span style="color: #000000;">, text: </span><span style="color: #000000;">'</span><span style="color: #000000;">福州</span><span style="color: #000000;">'</span><span style="color: #000000;">, pid: </span><span style="color: #000000;">1</span><span style="color: #000000;"> },
</span><span style="color: #008080;"> 7</span> <span style="color: #000000;">            { id: </span><span style="color: #000000;">3</span><span style="color: #000000;">, text: </span><span style="color: #000000;">'</span><span style="color: #000000;">广州</span><span style="color: #000000;">'</span><span style="color: #000000;">, pid: </span><span style="color: #000000;">2</span><span style="color: #000000;"> }, 
</span><span style="color: #008080;"> 8</span> <span style="color: #000000;">            { id: </span><span style="color: #000000;">4</span><span style="color: #000000;">, text: </span><span style="color: #000000;">'</span><span style="color: #000000;">厦门</span><span style="color: #000000;">'</span><span style="color: #000000;">, pid: </span><span style="color: #000000;">2</span><span style="color: #000000;">}];   
</span><span style="color: #008080;"> 9</span> <span style="color: #000000;">            $(</span><span style="color: #000000;">&quot;</span><span style="color: #000000;">#pro</span><span style="color: #000000;">&quot;</span><span style="color: #000000;">).ligerComboBox({
</span><span style="color: #008080;">10</span> <span style="color: #000000;">                data: proData, isMultiSelect: </span><span style="color: #0000FF;">false</span><span style="color: #000000;">,
</span><span style="color: #008080;">11</span> <span style="color: #000000;">                onSelected: </span><span style="color: #0000FF;">function</span><span style="color: #000000;"> (newvalue)
</span><span style="color: #008080;">12</span> <span style="color: #000000;">                {
</span><span style="color: #008080;">13</span> <span style="color: #000000;">                    </span><span style="color: #0000FF;">var</span><span style="color: #000000;"> newData </span><span style="color: #000000;">=</span><span style="color: #000000;"> </span><span style="color: #0000FF;">new</span><span style="color: #000000;"> Array();
</span><span style="color: #008080;">14</span> <span style="color: #000000;">                    </span><span style="color: #0000FF;">for</span><span style="color: #000000;"> (i </span><span style="color: #000000;">=</span><span style="color: #000000;"> </span><span style="color: #000000;">0</span><span style="color: #000000;">; i </span><span style="color: #000000;">&lt;</span><span style="color: #000000;"> cityData.length; i</span><span style="color: #000000;">++</span><span style="color: #000000;">)
</span><span style="color: #008080;">15</span> <span style="color: #000000;">                    {
</span><span style="color: #008080;">16</span> <span style="color: #000000;">                        </span><span style="color: #0000FF;">if</span><span style="color: #000000;"> (cityData[i].pid </span><span style="color: #000000;">==</span><span style="color: #000000;"> newvalue)
</span><span style="color: #008080;">17</span> <span style="color: #000000;">                        {
</span><span style="color: #008080;">18</span> <span style="color: #000000;">                            newData.push(cityData[i]);
</span><span style="color: #008080;">19</span> <span style="color: #000000;">                        }
</span><span style="color: #008080;">20</span> <span style="color: #000000;">                    }
</span><span style="color: #008080;">21</span> <span style="color: #000000;">                    liger.get(</span><span style="color: #000000;">&quot;</span><span style="color: #000000;">city</span><span style="color: #000000;">&quot;</span><span style="color: #000000;">).setData(newData);
</span><span style="color: #008080;">22</span> <span style="color: #000000;">                }
</span><span style="color: #008080;">23</span> <span style="color: #000000;">            });
</span><span style="color: #008080;">24</span> <span style="color: #000000;">            $(</span><span style="color: #000000;">&quot;</span><span style="color: #000000;">#city</span><span style="color: #000000;">&quot;</span><span style="color: #000000;">).ligerComboBox({ data: </span><span style="color: #0000FF;">null</span><span style="color: #000000;">, isMultiSelect: </span><span style="color: #0000FF;">true</span><span style="color: #000000;">, isShowCheckBox: </span><span style="color: #0000FF;">true</span><span style="color: #000000;"> });</span></div></pre>
                </p>
                                                                                                                                                    <a name="link170"></a>
                <h3 class="event">onButtonClick事件 示例：</h3>

                <p>
                <pre><div><!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><span style="color: #008080;"> 1</span> <span style="color: #000000;"> </span><span style="color: #0000FF;">var</span><span style="color: #000000;"> proData </span><span style="color: #000000;">=</span><span style="color: #000000;">
</span><span style="color: #008080;"> 2</span> <span style="color: #000000;">            [{ id: </span><span style="color: #000000;">1</span><span style="color: #000000;">, text: </span><span style="color: #000000;">'</span><span style="color: #000000;">广东</span><span style="color: #000000;">'</span><span style="color: #000000;"> },
</span><span style="color: #008080;"> 3</span> <span style="color: #000000;">            { id: </span><span style="color: #000000;">2</span><span style="color: #000000;">, text: </span><span style="color: #000000;">'</span><span style="color: #000000;">福建</span><span style="color: #000000;">'</span><span style="color: #000000;">}];
</span><span style="color: #008080;"> 4</span> <span style="color: #000000;">            $(</span><span style="color: #000000;">&quot;</span><span style="color: #000000;">#txtPro</span><span style="color: #000000;">&quot;</span><span style="color: #000000;">).ligerComboBox({ data: proData, isMultiSelect: </span><span style="color: #0000FF;">false</span><span style="color: #000000;">,
</span><span style="color: #008080;"> 5</span> <span style="color: #000000;">                onBeforeSelect: </span><span style="color: #0000FF;">function</span><span style="color: #000000;"> (newvalue)
</span><span style="color: #008080;"> 6</span> <span style="color: #000000;">                {
</span><span style="color: #008080;"> 7</span> <span style="color: #000000;">                    alert(</span><span style="color: #000000;">'</span><span style="color: #000000;">要选择的是</span><span style="color: #000000;">'</span><span style="color: #000000;"> </span><span style="color: #000000;">+</span><span style="color: #000000;"> newvalue);
</span><span style="color: #008080;"> 8</span> <span style="color: #000000;">                    </span><span style="color: #0000FF;">return</span><span style="color: #000000;"> confirm(</span><span style="color: #000000;">'</span><span style="color: #000000;">onBeforeSelect事件可以阻止选择，是否继续</span><span style="color: #000000;">'</span><span style="color: #000000;">);
</span><span style="color: #008080;"> 9</span> <span style="color: #000000;">                },
</span><span style="color: #008080;">10</span> <span style="color: #000000;">                onSelected: </span><span style="color: #0000FF;">function</span><span style="color: #000000;"> (newvalue)
</span><span style="color: #008080;">11</span> <span style="color: #000000;">                {
</span><span style="color: #008080;">12</span> <span style="color: #000000;">                    alert(</span><span style="color: #000000;">'</span><span style="color: #000000;">选择的是</span><span style="color: #000000;">'</span><span style="color: #000000;"> </span><span style="color: #000000;">+</span><span style="color: #000000;"> newvalue);
</span><span style="color: #008080;">13</span> <span style="color: #000000;">                }
</span><span style="color: #008080;">14</span> <span style="color: #000000;">            });</span></div></pre>
                </p>
                                                                                                                        	</body>
</html>